<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>to do list</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>年份</h1>
			 
				<p v-for="(i,j) in years" :key="j">
					<input type="checkbox"  v-model="i"/>{{i}}
				</p>
			  
			<h2>未完成</h2>
			<p v-for="(item,j) in notfinish" :key="item.id">
				<span>{{j+1}}</span>
				<span>{{item.tile}}</span>
				<span><input type="checkbox" v-model="item.isfinish"/>是否完成</span>
			</p>
			<hr/>
			<h1>已完成</h1>
			<p v-for="(item,j) in finished" :key="item.id">
				<span>{{j+1}}</span>
				<span>{{item.tile}}</span>
				<span><input type="checkbox" v-model="item.isfinish"/>完成</span>
			</p>
		</div>
		<script>
		 var vm=new Vue({
			 el:'#app',
			 data:{
				 todolists:[
					 {id:1,tile:"读五百本书",isfinish:false},
					 {id:2,tile:"学会瑜伽",isfinish:false},
					 {id:3,tile:"去西藏旅游",isfinish:false},
					 {id:4,tile:"体重降到120斤",isfinish:false},
					 {id:5,tile:"写blog 50篇",isfinish:false}
				 ],
				 years:[2019,2020,2021,2022]
			 },
			 computed:{
				 finished(){
					 let f=[];
					 f=this.todolists.filter(x=>x.isfinish==true);
					 return f;
				 },
				 notfinish(){
				 					 let f=[];
				 					 f=this.todolists.filter(x=>x.isfinish==false);
				 					 return f;
				 }
			 }
		 })
		</script>
	</body>
</html>
